<template>
  <el-scrollbar class="view ">
    <div class="box">
      <div class="block _sys">
        <div class="header">
          <span class="label">系统任务</span>
          <span class="num">(0)</span>
          <span class="flex1"></span>
          <ul class="op-btn">
            <li class="refresh-btn">
              <i class="el-icon-refresh"></i>
              <span>刷新</span>
            </li>
            <li class="add-btn">
              <i class="el-icon-circle-plus-outline"></i>
              <span>添加</span>
            </li>
          </ul>
        </div>
        <div class="container scroller1">
          <ul>
            <div class="empty">暂无数据</div>
          </ul>
        </div>
        <div class="footer">
          <button class="btn-add">
            <i class="el-icon-plus"></i>
          </button>
        </div>
      </div>
      <div class="block _user">
        <div class="header">
          <span class="label">用户自定义任务</span>
          <span class="num">(0)</span>
          <span class="flex1"></span>
          <ul class="op-btn">
            <li class="refresh-btn">
              <i class="el-icon-refresh"></i>
              <span>刷新</span>
            </li>
            <li class="add-btn">
              <i class="el-icon-circle-plus-outline"></i>
              <span>添加</span>
            </li>
          </ul>
        </div>
        <div class="container scroller1">
          <ul>
            <div class="empty">暂无数据</div>
          </ul>
        </div>
        <div class="footer">
          <button class="btn-add">
            <i class="el-icon-plus"></i>
          </button>
        </div>
      </div>
      <div class="block _stop">
        <div class="header">
          <span class="label">已停止任务</span>
          <span class="num">(2)</span>
          <span class="flex1"></span>
          <ul class="op-btn">
            <li class="refresh-btn">
              <i class="el-icon-refresh"></i>
              <span>刷新</span>
            </li>
          </ul>
        </div>
        <div class="container scroller1">
          <ul>
            <li class="_drag">
              <div class="h">
                <span class="type _warning">用户</span>
                <span class="name">cron任务，5秒执行一次</span>
              </div>
              <div class="remark"></div>
              <div class="f">
                <span>...</span>
                <span class="stop">已停止</span>
              </div>
              <div class="op">
                <div class="op-item">
                  <i class="el-icon-video-play"></i>
                  <span>开始</span>
                </div>
                <div class="op-item">
                  <i class="el-icon-edit-outline"></i>
                  <span>编辑</span>
                </div>
                <div class="op-item">
                  <i></i>
                  <span class="el-icon-tickets">查看日志</span>
                </div>
              </div>
            </li>
            <li class="_drag">
              <div class="h">
                <span class="type _warning">用户</span>
                <span class="name">cron任务，5秒执行一次</span>
              </div>
              <div class="remark"></div>
              <div class="f">
                <span>...</span>
                <span class="stop">已停止</span>
              </div>
              <div class="op">
                <div class="op-item">
                  <i class="el-icon-video-play"></i>
                  <span>开始</span>
                </div>
                <div class="op-item">
                  <i class="el-icon-edit-outline"></i>
                  <span>编辑</span>
                </div>
                <div class="op-item">
                  <i></i>
                  <span class="el-icon-tickets">查看日志</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="block _log">
        <div class="header">
          <span class="label">日志</span>
          <span class="num">(10)</span>
          <span class="flex1"></span>
          <ul class="op-btn">
            <li>
              <el-checkbox v-model="checked">异常</el-checkbox>
            </li>
            <li class="refresh-btn">
              <i class="el-icon-refresh"></i>
              <span>刷新</span>
            </li>
          </ul>
        </div>
        .
        <div class="container scroller1">
          <ul>
            <li>
              <div class="h">
                <span class="name"> 1 · cron任务，5秒执行一次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:26:15</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 2 · cron任务，5秒执行一次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:26:10</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 3 · cron任务，5秒执行一次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:26:05</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 4 · cron任务，5秒执行一次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:26:00</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 5 · cron任务，5秒执行一次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:25:55</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 6 · 每秒执行,总共5次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:25:18</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 7 · 每秒执行,总共5次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:25:17</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 8 · 每秒执行,总共5次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:25:16</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 9 · 每秒执行,总共5次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:25:15</span>
              </div>
            </li>
            <li>
              <div class="h">
                <span class="name"> 10 · 每秒执行,总共5次 </span>
              </div>
              <div class="remark">"任务执行成功"</div>
              <div class="f">
                <span>执行时间：2021-03-10 14:25:14</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.flex1 {
  flex: 1;
}


.view {
  width: 100%;
  input,
  button {
    outline: none;
  }
  .box {
    display: flex;
    height: 100%;
  }
  .block {
    height: calc(100% - 10px);
    width: 400px;
    margin-right: 10px;
    flex-shrink: 0;
    .header {
      display: flex;
      align-items: center;
      height: 40px;
      background-color: #f0f0f0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      position: relative;
      top: 5px;
      z-index: 1;
      padding: 0 10px 5px;
      .label,
      .num {
        color: #000;
      }
      .label {
        font-size: 12px;
        margin: 0 5px;
        letter-spacing: 0.5px;
      }
      .num {
        font-size: 12px;
      }
      .op-btn {
        display: flex;
        li {
          display: flex;
          align-items: center;
          list-style: none;
          cursor: pointer;
          height: 25px;
          padding: 0 10px;
          background-color: #fff;
          border-radius: 5px;
          margin-left: 5px;
          i {
            font-size: 13px;
            margin-right: 2px;
          }
          span {
            font-size: 12px;
          }
        }
      }
    }

    .container {
      max-height: calc(100% - 90px);
      overflow-y: auto;
      margin-bottom: 5px;
      z-index: 2;
      position: relative;
      .empty {
        text-align: center;
        font-size: 13px;
        padding: 20px;
        border: 1px solid #f7f7f7;
        border-radius: 5px;
        background-color: #fff;
      }
      ._drag {
        cursor: pointer;
      }
      ul li {
        list-style: none;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 5px;
        padding: 10px 15px;
        font-size: 14px;
        letter-spacing: 0.5px;
        border: 1px solid #f7f7f7;
        &:hover {
          .op {
            height: 30px;
          }
          .remark {
            color: #4165df;
          }
        }
        .h {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-bottom: 10px;
          ._warning {
            background-color: #e6a23c;
            color: #fff;
            font-size: 12px;
            border-radius: 3px;
            padding: 1px 2px;
            margin-right: 5px;
          }
        }
        .remark {
          font-size: 12px;
          color: #666;
          margin-bottom: 20px;
        }
        .f {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          .stop {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-left: 30px;
            position: relative;
            color: #f56c6c;
            &::before {
              content: "";
              display: block;
              height: 6px;
              width: 6px;
              border-radius: 6px;
              position: absolute;
              left: -15px;
              background-color: #f56c6c;
            }
          }
        }
        .op {
          display: flex;
          height: 0;
          margin-top: 15px;
          transition: height 0.3s;
          overflow: hidden;
          .op-item {
            flex: 1;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              font-size: 16px;
              margin-right: 5px;
            }
            span {
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
    }
    .scroller1 {
      overflow: auto;
      position: relative;
      z-index: 9;
    }
    .footer {
      height: 36px;
    }
    .btn-add {
      height: 34px;
      width: 100%;
      border-radius: 3px;
      border: 0;
      background-color: #fff;
      cursor: pointer;
      i {
        font-size: 16px;
        color: #999;
      }
    }
  }
}
</style>
